<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画效果</title>
		<style type="text/css">
			@keyframes animate{
				/* from{
					transform: scale(1) translate(0px,0px);
				}
				to{
					transform: scale(3) translate(400px,200px);
				} */
				0%{
					transform: scale(1) translate(0px,0px);
					background-color: orange;
				}
				30%{
					transform: scale(1.5) translate(200px,0px);
					background-color: greenyellow;
				}
				60%{
					transform: scale(1) translate(0px,200px);
					background-color: hotpink;
				}
				90%{
					transform: scale(1.5) translate(-200px,0px);
					background-color: blueviolet;
				}
				100%{
					transform: scale(1.5) translate(100px,100px);
					background-color: deepskyblue;
				}
			}
			
			#d1{
				position: absolute;
				left: 200px;
				top: 100px;
				width: 200px;
				height: 150px;
				background-color: orange;
			}
			.action{
				animation: animate 5s infinite alternate;
			}
		</style>
	</head>
	<body>
		<button onclick="play()">播放</button>
		<div id="d1">
			
		</div>
		<script>
			function play () {
				var d1 = document.getElementById("d1")
				d1.setAttribute("class","action")
			}
		</script>
	</body>
</html>